<!-- 基本信息 -->
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getTaskCollectDataApi } from '@/common/apis/train'
import * as echarts from 'echarts'
const chartRef = ref(null)
import { useRoute } from 'vue-router'
const route = useRoute()
interface props {
  roundNumber: string
  taskModeMap: string
}
const props = defineProps<props>()

// 心电图

const myChart = () => {
  if (!chartRef.value) return;
  const oldChart = echarts.getInstanceByDom(chartRef.value);
  if (oldChart) oldChart.dispose();
  const myChart = echarts.init(chartRef.value)
  const option = {
    backgroundColor: '#000', // 深色背景
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#0d1a26',
      borderColor: '#3e3e3e',
      textStyle: {
        color: '#fff',
      },
    },
    legend: {
      data: series.value.map((item: any) => item.name),
      textStyle: {
        color: '#fff',
      },
      right: 20,
      top: 10,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: { lineStyle: { color: '#ccc' } },
      axisLabel: { color: '#ccc' },
      data: siml_times.value,
    },
    yAxis: {
      type: 'value',
      name: '频率',
      nameTextStyle: {
        align: 'right', // 👈 让名称右对齐
        padding: [0, 10, 10, 0],  // 👉 重点，右边50px，把"频率"往左推
      },
      min: 0,            // 或者 'dataMin'
      max: 60,           // 或者 'dataMax'
      axisLine: { lineStyle: { color: '#ccc' } },
      axisLabel: { color: '#ccc' },
      splitLine: {
        lineStyle: {
          color: '#333',
        },
      },
    },
    series: series.value,
  }
  myChart.setOption(option)
  // 窗口缩放时自适应
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

onMounted(() => {
  myChart()
})
const siml_times = ref<any[]>([])
const series = ref<any[]>([])
watch(() => props.roundNumber, (newVal) => {
  if (newVal !== '' && props.taskModeMap !== '') {
    getTaskCollectDataApi(route.query.id as string, props.taskModeMap, newVal).then((res: any) => {
      series.value = res.data.series
      siml_times.value = res.data.siml_times
      // 非空校验防止报错
      if (Array.isArray(res.data.series) && res.data.series.length > 0) {
        res.data.series[0].type = 'line'
        res.data.series[0].smooth = false
        res.data.series[0].symbol = 'none'
        res.data.series[0].lineStyle = { width: 1 }
      }
      myChart()
    })
  }
})

</script>

<template>
  <div class="wrapper">
    <div class="number-info">
      <SvgIcon name="info-little-title" class="svg-icon primary" />
      <span class="cpi-header-text">数据</span>
    </div>
    <div>
      <div ref="chartRef" style="width: 100%; height: 400px;"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: auto;
  background: #000;
}

.radio-group {
  margin-bottom: 10px;
}

.radio-text {
  display: inline-block;
  margin-right: 10px;
}

.number-info {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: 16px;
}
</style>
